<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./src/css/reset.css">
    <link rel="stylesheet" href="./src/css/bootstrap.min.css">
    <link rel="stylesheet" href="./src/css/index.css">
    <link rel="stylesheet" href="./src/css/page2.css">
    <script src="./src/js/jquery-1.10.2.min.js"></script>
    <script src="./src/js/setScale.js"></script>
    <title>安全生产大数据展现</title>

</head>

<body>

    <!-- Modal 进入系统 -->
    <div class="modal fade" id="myLogin" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 662px;">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="close-item"></div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">进入系统</h4>
                </div>
                <div class="modal-body">
                    <div class="info-msg">
                        <p>温馨提示：</p>
                        请选择你想进入的子系统并点击相应的按钮。
                    </div>
                    <nav class="clearfix nav-box">
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item "> <img src="./src/img/sys-icon1.png"
                                    alt="">企业数据中心</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon2.png"
                                    alt="">隐患排查治理</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon3.png"
                                    alt="">监督检查管理</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon4.png"
                                    alt="">安全生产知识库</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon5.png"
                                    alt="">决策分析管理</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon6.png"
                                    alt="">应急救援指挥</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon7.png" alt="">辅助业务库</a>
                        </div>
                        <div class="gutter-box">
                            <a href="javascript:;" class="nav-item"> <img src="./src/img/sys-icon8.png"
                                    alt="">风险监测预警</a>
                        </div>


                    </nav>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" style="background: #014BE6;"
                        data-dismiss="modal">退出系统</button>
                    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 报警记录 -->
    <div class="modal fade" id="warningRecord" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 1232px;">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="close-item"></div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">报警记录</h4>
                </div>


                <div class="modal-body" style="padding: 15px 0;">
                    <div class="form-box" style="margin-bottom: 5px;">
                        <table>
                            <colgroup>
                                <col style="width:150px;">
                                <col>
                                <col style="width:150px;">
                                <col>
                            </colgroup>
                            <tr>
                                <td>企业名称：</td>
                                <td> <input type="text" class="form-control" id="exampleInputEmail1"
                                        placeholder="这里是文字信息">
                                </td>
                                <td>重点部位名称：</td>
                                <td> <input type="text" class="form-control" id="exampleInputEmail1"
                                        placeholder="这里是文字信息">
                            </tr>
                            <tr>
                                <td>设备名称：</td>
                                <td> <input type="text" class="form-control" id="exampleInputEmail1"
                                        placeholder="这里是文字信息">
                                </td>
                            </tr>

                        </table>
                    </div>
                    <div class="search">
                        <button type="button" class="btn btn-primary" style="background: #014BE6;"> 查询 </button>
                    </div>
                    <table class="table-list1">
                        <colgroup>
                            <col style="width:42px">
                            <col>
                            <col style="width:130px">
                            <col style="width:102px">
                            <col style="width:194px">
                            <col style="width:194px">
                            <col style="width:170px">
                            <col style="width:88px">
                            <col style="width:86px">

                        </colgroup>
                        <thead>
                            <tr>
                                <td></td>
                                <td>企业名称</td>
                                <td>重点部位名称</td>
                                <td>设备名称</td>
                                <td>报警开始时间</td>
                                <td>报警结束时间</td>
                                <td>阈值区间</td>
                                <td>报警状态</td>
                                <td>处理状态</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a>
                                </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a>
                                </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a> </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a> </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a> </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a> </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>


                            <tr>
                                <td>12</td>
                                <td>这里是企业名称</td>
                                <td>重点部位名称</td>
                                <td> <a href="javascript:;">温度传感器1</a> </td>
                                <td>2015-01-02 11:11:11</td>
                                <td>2015-01-02 11:12:11</td>
                                <td>上限1:m；上限1:n；<br />
                                    下限1:a；下限2:b</td>
                                <td>解除</td>
                                <td>已处理</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="pager2" id="J_pager2" style="clear: both;">
                        <ul class="pager" style="float: left;">
                            <li class="disabled"><a data-ac="first" data-page="1" href="#pager2-url-cache=1"
                                    title="转到第 1 页">首页</a></li>
                            <li class="disabled"><a data-ac="prev" data-page="1" href="#pager2-url-cache=1"
                                    title="转到第 1 页">上页</a></li>
                            <li class="active"><a data-ac="page" data-page="1" href="#pager2-url-cache=1"
                                    title="转到第 1 页">1</a></li>
                            <li class=""><a data-ac="page" data-page="2" href="#pager2-url-cache=2"
                                    title="转到第 2 页">2</a></li>
                            <li class=""><a data-ac="page" data-page="3" href="#pager2-url-cache=3"
                                    title="转到第 3 页">3</a></li>
                            <li class=""><a data-ac="page" data-page="4" href="#pager2-url-cache=4"
                                    title="转到第 4 页">4</a></li>
                            <li class=""><a data-ac="page" data-page="5" href="#pager2-url-cache=5"
                                    title="转到第 5 页">5</a></li>
                            <li class=""><a data-ac="page" data-page="6" href="#pager2-url-cache=6"
                                    title="转到第 6 页">6</a></li>
                            <li class=""><a data-ac="next" data-page="2" href="#pager2-url-cache=2"
                                    title="转到第 2 页">下页</a></li>
                            <li class=""><a data-ac="last" data-page="6" href="#pager2-url-cache=6"
                                    title="转到第 6 页">尾页</a></li>
                        </ul>
                        <ul class="pager" style="float: right;">
                            <li class="disabled"><span class="label label-default">60条 1/6页</span></li>
                        </ul>
                    </div>
                    <!-- <button type="button" class="btn btn-primary" style="background: #014BE6;"
                        data-dismiss="modal">退出系统</button> -->
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 查看警情记录 -->
    <div class="modal fade" id="detailRecord" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 908px;">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="close-item"></div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">查看警情记录</h4>
                </div>
                <div class="modal-body">

                    <table class="table-list2">
                        <thead>
                            <tr>
                                <td colspan="4">基本信息</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>企业名称：</th>
                                <td colspan="3">这是企业名称</td>

                            </tr>


                            <tr>
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr style="height: 60px;">
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr>
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr>
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr>
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr>
                                <th>重点部位名称：</th>
                                <td>这里是重点部位名称</td>
                                <th>设备名称：</th>
                                <td>这里是设备名称</td>
                            </tr>
                            <tr>
                                <th>设备类型：</th>
                                <td>液位</td>
                                <th>报警级别：</th>
                                <td>一级报警</td>
                            </tr>

                            <tr>
                                <th>设备类型：</th>
                                <td>液位</td>
                                <th>报警级别：</th>
                                <td>一级报警</td>
                            </tr>
                            <tr>
                                <th>设备类型：</th>
                                <td>液位</td>
                                <th>报警级别：</th>
                                <td>一级报警</td>
                            </tr>
                            <tr>
                                <th>报警开始时间：</th>
                                <td>2017-06-29 15:00:59</td>
                                <th>报警结束时间：</th>
                                <td>2017-06-29 15:01:59</td>
                            </tr>
                            <tr>
                                <th>报警状态：</th>
                                <td>解除</td>
                                <th>处理状态：</th>
                                <td>未处理</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table-list2">
                        <thead>
                            <tr>
                                <td colspan="4">报警时间内传感波动曲线</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>

                                <td colspan="4">
                                    <div id="main-line" style="width: 100%; height:342px;"> </div>
                                </td>

                            </tr>

                        </tbody>
                    </table>

                    <table class="table-list2" style="margin-bottom: 0">
                        <thead>
                            <tr>
                                <td colspan="4">处置信息</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>

                                <th>报警原因说明：</th>
                                <td colspan="3">这里是详细信息</td>

                            </tr>
                            <tr>

                                <th>处置措施：</th>
                                <td colspan="3">这里是详细信息</td>

                            </tr>

                        </tbody>
                    </table>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-primary" style="background: #014BE6;"
                        data-dismiss="modal">退出系统</button>
                </div> -->
            </div>
        </div>
    </div>

    <div class="wrapper">
        <div class="global-content">
            <header class="header">
                <div class="left-date">2019/05/31 周五 10:20:05</div>
                <a href="javascript:;" class="login-sys" data-toggle="modal" data-target="#myLogin">进入系统</a>
            </header>
            <section class="content">
                <aside class="left-item">
                    <div class="left-table1">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="has-hover">
                                        企业总数
                                        <p>10000</p>
                                    </td>
                                    <td>
                                        执法检查数
                                        <p>10000</p>
                                    </td>
                                    <td>
                                        累计隐患数
                                        <p>10000</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!--  -->
                    <div class="left-table2">
                        <table>
                            <colgroup>
                                <col style="width: 40px;" />
                                <col>
                                <col>
                                <col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <td colspan="4">企业行业占比TOP5</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="">1</span></td>
                                    <td>危险化学品</td>
                                    <td>18.0%</td>
                                    <td>20</td>

                                </tr>
                                <tr>
                                    <td><span class="">2</span></td>
                                    <td>危险化学品</td>
                                    <td>18.0%</td>
                                    <td>20</td>

                                </tr>
                                <tr>
                                    <td><span class="">3</span></td>
                                    <td>危险化学品</td>
                                    <td>18.0%</td>
                                    <td>20</td>

                                </tr>
                                <tr>
                                    <td><span class="">4</span></td>
                                    <td>危险化学品</td>
                                    <td>18.0%</td>
                                    <td>20</td>

                                </tr>
                                <tr>
                                    <td><span class="">5</span></td>
                                    <td>危险化学品</td>
                                    <td>18.0%</td>
                                    <td>20</td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--  -->
                    <div id="main" style="height: 290px;"></div>
                    <!--  -->
                    <div id="main2" style="height: 232px;"></div>
                </aside>
                <div class="middle-item">
                    <!-- 地图 -->
                    <div class="map-box">
                        baidu
                    </div>
                    <!-- 图 -->
                    <div class="echarts-box">
                        <div class="select-group">
                            <select class="form-control">
                                <option>2018年</option>
                                <option>2018年</option>
                                <option>2018年</option>
                                <option>2018年</option>
                                <option>2018年</option>
                            </select>
                        </div>
                        <div id="main3" style="width: 100%;height:100%;"></div>

                    </div>
                </div>
                <aside class="right-item">
                    <!--  -->
                    <div class="right-table1">
                        <table>
                            <tr>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon1.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        物资装备
                                        <p>233</p>
                                    </div>

                                </td>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon2.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        医疗机构
                                        <p>233</p>
                                    </div>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon3.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        应急救援队伍
                                        <p>233</p>
                                    </div>

                                </td>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon4.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        消防力量
                                        <p>233</p>
                                    </div>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon5.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        避险场所
                                        <p>233</p>
                                    </div>

                                </td>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon6.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        公安力量
                                        <p>233</p>
                                    </div>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon7.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        运输力量
                                        <p>233</p>
                                    </div>

                                </td>
                                <td>
                                    <div class="img-box"> <img width="40" src="./src/img/icon8.png" alt="">
                                    </div>
                                    <div class="con-box">
                                        应急专家
                                        <p>233</p>
                                    </div>
                                </td>

                            </tr>
                        </table>
                    </div>

                    <!--  -->
                    <div class="right-table2">
                        <div class="tit">监测预警情况</div>
                        <table>

                            <tbody>
                                <tr>
                                    <td>
                                        <div class="img-box"> <img width="40" src="./src/img/icon9.png" alt="">
                                        </div>
                                        <div class="con-box">
                                            接入重点企业
                                            <p>233</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="img-box"> <img width="40" src="./src/img/icon10.png" alt="">
                                        </div>
                                        <div class="con-box">
                                            重点部位
                                            <p>233</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="img-box"> <img width="40" src="./src/img/icon11.png" alt="">
                                        </div>
                                        <div class="con-box">
                                            接入视频设备
                                            <p>233</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="img-box"> <img width="40" src="./src/img/icon12.png" alt="">
                                        </div>
                                        <div class="con-box">
                                            接入传感信号
                                            <p>233</p>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!--  -->

                    <div class="right-table3">
                        <div class="tit">监测预警情况
                            <a href="javascript:;" data-toggle="modal" data-target="#warningRecord">更多>></a>
                        </div>
                        <table class="table-table3-1">
                            <tbody>
                                <tr>
                                    <td><img width="40" src="./src/img/map_bybj.png" alt="">本月报警次数</td>
                                    <td>38</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table-table3-2">
                            <colgroup>
                                <col style="width:16px;">
                                <col style="">
                                <col style="width:100px;">
                                <col style="width:100px;">

                            </colgroup>
                            <thead>
                                <tr>
                                    <td colspan="2">企业名称</td>
                                    <td>报警次数</td>
                                    <td>最近一次报警</td>
                                </tr>
                            </thead>
                            <tbody>

                                <tr data-toggle="modal" data-target="#detailRecord">
                                    <td> <span class="line"></span> </td>
                                    <td title="浙江图讯科技股份有限公司">浙江图讯科技股份有限公司</td>
                                    <td>55</td>
                                    <td>2019-06-17</td>
                                </tr>
                                <tr data-toggle="modal" data-target="#detailRecord">
                                    <td> <span class="line"></span> </td>
                                    <td title="浙江图讯科技股份有限公司">浙江图讯科技股份有限公司</td>
                                    <td>55</td>
                                    <td>2019-06-17</td>
                                </tr>
                                <tr data-toggle="modal" data-target="#detailRecord">
                                    <td> <span class="line"></span> </td>
                                    <td title="浙江图讯科技股份有限公司">浙江图讯科技股份有限公司</td>
                                    <td>55</td>
                                    <td>2019-06-17</td>
                                </tr>
                                <tr data-toggle="modal" data-target="#detailRecord">
                                    <td> <span class="line"></span> </td>
                                    <td title="浙江图讯科技股份有限公司">浙江图讯科技股份有限公司</td>
                                    <td>55</td>
                                    <td>2019-06-17</td>
                                </tr>
                                <tr data-toggle="modal" data-target="#detailRecord">
                                    <td> <span class="line"></span> </td>
                                    <td title="浙江图讯科技股份有限公司">浙江图讯科技股份有限公司</td>
                                    <td>55</td>
                                    <td>2019-06-17</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--  -->
                </aside>
            </section>
        </div>
    </div>
    <script src="./src/js/echarts.min.js"></script>
    <script src="./src/js/bootstrap.min.js"></script>
    <script src="./src/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- 滚动条 -->
    <script src="./src/js/index.min.js">

    </script>
</body>

</html>